<template>
  <div class="category">
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select @change="c1Change" v-model="categoryStore.category1Id">
          <el-option v-for="c1 in categoryStore.category1List" :label="c1.name" :value="c1.id" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select @change="c2Change" v-model="categoryStore.category2Id">
          <el-option v-for="c2 in categoryStore.category2List" :label="c2.name" :value="c2.id" :key="c2.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select @change="c3Change" v-model="categoryStore.category3Id">
          <el-option v-for="c3 in categoryStore.category3List" :label="c3.name" :value="c3.id" :key="c3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

  </div>
</template>
<script setup lang='ts'>
import { onBeforeMount, onMounted, ref } from 'vue'
import useCategoryStore from '@/store/modules/category';

let categoryStore = useCategoryStore()

// 一级下拉菜单点击事件
const c1Change = (id: number) => {
  // 将二级、三级下拉菜单置为空
  categoryStore.category2Id = ''
  categoryStore.category3Id = ''
  // 将列表区的所有查询出来的数据清空
  categoryStore.attrInfoList = []
  categoryStore.category1Id = id
  // 通过一级菜单的id，调用接口获取二级菜单选项
  categoryStore.getC2List(id)
}
// 
const c2Change = (id: number) => {
  // 将三级下拉菜单置为空
  categoryStore.category3Id = ''
  // 将列表区的所有查询出来的数据清空
  categoryStore.attrInfoList = []
  categoryStore.category2Id = id
  console.log(id);
  categoryStore.getC3List(id)
}
const c3Change = (id: number) => {
  categoryStore.category3Id = id
  // 调用接口获取属性列表页数据
  categoryStore.getAttrInfoList(categoryStore.category1Id, categoryStore.category2Id, categoryStore.category3Id)
}
onBeforeMount(() => {

})
onMounted(() => {

})

</script>
<style lang="scss" scoped>
.el-select {
  width: 150px;
}
</style>